import React from "react";

import { View, Text, TextInput, Image, TouchableOpacity } from "react-native";

import { Button } from "react-native-elements";
import dismissKeyboard from "dismissKeyboard";

import Config from "../../config";
import BasePage from "../common/BasePage";
import Constants from "../../common/Constants";
import SizeUtils from "../../common/SizeUtils";
import CommonStyles from "../../common/CommonStyles";
import ResponseConstants from "../../common/ResponseConstants";

import RequestSmsAction from "../../actions/login/RequestSmsAction";
import LoginSendVerifyAction from "../../actions/login/LoginSendVerifyAction";

export default class UserRenzhengPage extends BasePage {
  constructor(props) {
    super(props);
    this._width =
      SizeUtils.getWindowSize().width -
      SizeUtils.translateDesignWidthToCode(54 * 2);
    let userData = this.props.pageData.routeData.userData;
    this.state.userData = userData;
    this.state.viewStatus = 1;
    this.state.workerNum = userData.ee_no ? userData.ee_no + "" : "";
    this.state.smsNum = "";
    this.state.trueName = userData.name ? userData.name : "";
    this.state.smsIntervalTick = -1;
    this.state.hasVerified =
      userData.ee_no != null &&
      userData.ee_no != "" &&
      userData.ee_no != "0" &&
      userData.name != null &&
      userData.name != "";
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.viewStatus == ResponseConstants.status_deal_success) {
      this.state.viewStatus = 1;
      nextState.viewStatus = 1;
      this.state.userData.ee_no = this.state.workerNum;
      this.state.userData.name = this.state.trueName;
      this.state.hasVerified = true;
      nextState.hasVerified = true;
      this.state.smsNum = "";
    }
    if (this.state.viewStatus != nextState.viewStatus) {
      if (nextState.viewStatus == ResponseConstants.status_sms_success) {
        this._smsInterval = setInterval(this._updateInterval.bind(this), 1000);
        this._updateInterval();
      } else {
        this._clearInterval();
      }
    }
    return true;
  }

  _dealLeavePage() {
    this._clearInterval();
  }

  _updateInterval() {
    var tick =
      this.state.smsIntervalTick == -1 ? 60 : this.state.smsIntervalTick - 1;
    if (tick == 0) {
      this._clearInterval();
      tick = -1;
    }
    this.setState({
      smsIntervalTick: tick
    });
  }

  _clearInterval() {
    if (this._smsInterval) {
      clearInterval(this._smsInterval);
      this._smsInterval = null;
    }
  }

  render() {
    return (
      <TouchableOpacity
        style={{
          paddingTop: Config.paddingTop,
          backgroundColor: "#ffffffff",
          paddingLeft: SizeUtils.translateDesignWidthToCode(54),
          paddingRight: SizeUtils.translateDesignWidthToCode(54),
          flexDirection: "column",
          alignItems: "center",
          height: SizeUtils.getWindowSize().height
        }}
        onPress={() => dismissKeyboard()}
        activeOpacity={1}
      >
        {this._renderNameText()}
        {this._renderPhoneText()}
        {this._renderSmsText()}
        <View style={{ flex: 1 }} />
        {this._renderLoginButton()}
        {this._renderNavigationBar()}
      </TouchableOpacity>
    );
  }

  _renderNameText() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(94),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          真实姓名 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(94),
            flex: 1,
            textAlignVertical: "center",
            fontSize: SizeUtils.translateFontSizeToCode(28)
          }}
          onChangeText={trueName => this.setState({ trueName })}
          placeholder=""
          underlineColorAndroid="transparent" // android
          multiline={false}
          maxLength={20}
          value={this.state.trueName}
          editable={this.state.hasVerified == false}
        />
      </View>
    );
  }

  _renderPhoneText() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(94),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
          // marginTop:SizeUtils.translateDesignHeightToCode(72),
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          工会会员号 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(94),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(32)
          }}
          onChangeText={workerNum => this.setState({ workerNum })}
          placeholder=""
          underlineColorAndroid="transparent" // android
          multiline={false}
          maxLength={11}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value={this.state.workerNum}
          editable={this.state.hasVerified == false}
        />
      </View>
    );
  }

  _renderSmsText() {
    if (this.state.hasVerified) {
      return;
    }
    return (
      <View
        style={{
          flexDirection: "row",
          height: SizeUtils.translateDesignHeightToCode(94),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3),
          borderColor: "#eeeeee",
          flexDirection: "row",
          alignItems: "center"
          // marginTop:SizeUtils.translateDesignHeightToCode(40),
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000",
            textAlignVertical: "center",
            textAlign: "center"
          }}
        >
          验证码 :{" "}
        </Text>
        <TextInput
          style={{
            height: SizeUtils.translateDesignHeightToCode(94),
            textAlignVertical: "center",
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(32)
          }}
          onChangeText={smsNum => this.setState({ smsNum })}
          placeholder=""
          underlineColorAndroid="transparent" // android
          multiline={false}
          maxLength={6}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value={this.state.smsNum}
        />
        <TouchableOpacity
          onPress={() => this._onRequestSms()}
          style={{
            width: SizeUtils.translateDesignWidthToCode(250),
            height: SizeUtils.translateDesignHeightToCode(94),
            flexDirection: "row",
            justifyContent: "flex-end",
            alignItems: "center"
          }}
          disabled={this.state.smsIntervalTick > 0 || this.state.hasVerified}
        >
          <View
            style={{
              padding: SizeUtils.translateDesignNumToCode(10),
              borderRadius: SizeUtils.translateDesignNumToCode(4),
              borderColor: "#ff6600",
              borderWidth: SizeUtils.translateDesignNumToCode(3)
            }}
          >
            <Text
              style={[
                CommonStyles.primaryText,
                {
                  fontSize: SizeUtils.translateFontSizeToCode(24),
                  color: "#ff6600"
                }
              ]}
            >
              {this._getSmsBtnText()}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  _getSmsBtnText() {
    var text = "获取验证码";
    if (this.state.smsIntervalTick > 0) {
      text = text + "(" + this.state.smsIntervalTick + ")";
    }
    return text;
  }

  _onRequestSms() {
    new RequestSmsAction().call(this, { type: 4 });
  }

  _renderLoginButton() {
    return (
      <View
        style={{
          width: this._width,
          flexDirection: "column",
          alignItems: "center",
          marginBottom: SizeUtils.translateDesignHeightToCode(30)
        }}
      >
        <TouchableOpacity
          disabled={
            this.state.trueName == "" ||
            this.state.workerNum == "" ||
            this.state.smsNum == "" ||
            this.state.viewStatus == 4 ||
            (this.state.hasVerified && false)
          }
          style={{
            width:
              SizeUtils.getWindowSize().width -
              SizeUtils.translateDesignWidthToCode(28 * 2),
            height: SizeUtils.translateDesignHeightToCode(72),
            borderRadius: 10,
            backgroundColor: "#EE3535",
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={() => this._onPressDoneBtn()}
        >
          <Text
            style={{
              color: "#ffffff",
              fontSize: SizeUtils.translateFontSizeToCode(28)
            }}
          >
            {this._getVerifyBtnText()}
          </Text>
        </TouchableOpacity>
        <Text
          style={{
            color: "#999999",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            paddingTop: SizeUtils.translateDesignHeightToCode(20)
          }}
        >
          {this._renderSystemNotice()}
        </Text>
      </View>
    );
  }

  _getVerifyBtnText() {
    return this.state.hasVerified ? "已认证" : "立即认证";
  }

  _renderSystemNotice() {
    let statusText = "";
    let showCode = true;
    if (this.state.viewStatus == 1) {
      return "";
    } else if (this.state.viewStatus == 2) {
      statusText = "获取验证码中";
      showCode = false;
    } else if (this.state.viewStatus == ResponseConstants.status_sms_success) {
      statusText = "验证码已获取";
      showCode = false;
    } else if (this.state.viewStatus == 4) {
      statusText = "发送注册请求";
      showCode = false;
    } else if (
      this.state.viewStatus == ResponseConstants.status_sms_length_error
    ) {
      statusText = ResponseConstants.status_sms_length_error_text;
      showCode = false;
    } else {
      statusText = this.state.statusText;
    }
    if (showCode) {
      statusText = statusText + " code:" + this.state.viewStatus;
    }
    return statusText;
  }

  _onPressDoneBtn() {
    dismissKeyboard();
    if (this.state.smsNum == "" || this.state.smsNum.length != 6) {
      this.setState({
        viewStatus: ResponseConstants.status_sms_length_error
      });
      return;
    }
    new LoginSendVerifyAction().call(this, this.state);
  }
}
